<template>
  <div class="Dzzgl">
    <div class="left">
      <!-- 组织列表搜索 -->
      <div class="search-wrap">
        <el-input
          placeholder="请输入关键字查询"
          v-model="keyword"
          class="input-with-select"
          size="small"
          @change="search"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <!-- 组织列表树形显示 -->
      <div class="tree-wrap">
        <el-tree :data="treeData" node-key="id" :expand-on-click-node="true">
          <span class="custom-tree-node" slot-scope="{ data }" @click="selectNode(data)">
            <span>{{ data.label }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="right">
        <!-- 组织名称搜索 -->
        <div class="search-wrap">
            <div class="search-item">组织名称:
                <el-input placeholder="请输入党组织名称" v-model="zzmc" class="input-with-select" size="small"></el-input>
            </div>
            <div class="search-item">上级组织名称:
                <el-input placeholder="请输入上级组织名称" v-model="sjzzmc" class="input-with-select" size="small"></el-input>
            </div>
            <div class="search-item-btn">
                <el-button icon="el-icon-search" size="small" @click="searchzz">查询结果</el-button>
            </div>
        </div>
      <!-- 组织添加按钮 -->
        <div class="clearfix" style="margin-bottom:10px;">
            <span class="Organizationlist">组织管理列表</span>
            <el-button
            style="float:right;"
            type="warning"
            size="small"
            @click="addOrganizetion"
            >添加组织</el-button>
        </div>
      <!-- 组织管理列表 -->
      <div class="table-wrap">
        <el-table :data="tableData" style="width: 100%" size="small" max-height="710px" overflow="auto" max-width="720px">
          <el-table-column prop="id" label="序号" fixed></el-table-column>
          <el-table-column prop="status" label="管理账号"></el-table-column>
          <el-table-column prop="name" label="组织名称"></el-table-column>
          <el-table-column prop="upname" label="上级组织名称"></el-table-column>
          <el-table-column prop="type" label="组织类型"></el-table-column>
          <el-table-column prop="tel" label="联系电话"></el-table-column>
          <el-table-column prop="status" label="账号状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#ffad19"
                inactive-color="#c7c7c7"
                active-value="1"
                inactive-value="0"
                text-align="center"
               @change="customerStatus(scope.row)" ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="cz" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-row display="flex" justify-content="space-around">
                  <!-- 查看详情 -->
                <el-button icon="iconfont icon-chakan1" circle size="mini" @click="viewDetails(scope.row)"></el-button>
                <!-- 重置账号密码 -->
                <el-button icon="iconfont icon-zhongzhimima" circle size="mini" @click="resetPassWord(scope.row)"></el-button>
                <!-- 删除账号 -->
                <el-button
                  icon="iconfont icon-shanchu"
                  circle
                  size="mini"
                  @click="deletStatus(scope.row)"
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      page: 1,
      total: 0,
      keyword: "",
      zzmc: "",
      sjzzmc: "",
      zhzt: '',
      type: '',
      radn: '',
      treeData: [],
      tableData: [
        // {
        //   id: '1',
        //   date: "001",
        //   status: "888888",
        //   name: "上海恒天党委",id
        //   upname: "中国恒天党委",
        //   patyname: "党支部",
        //   tel:"207-88888888",
        //   zhzt: true
        // }
      ],
      currentNode: null
    };
  },
  mounted() {
    // 获取下级子组织并加载tree列表
    this.rand = sessionStorage.rand
    // console.log(this.rand,'rand')
    this.$axios({
      method: "post",
      url: "/index/organization/organization_chart",
      data: {
          rand: this.rand
      }
    }).then(res => {
      if (res.data.code == "200") {
        this.treeData = res.data.data
        this.treeData = [
          {
            id: 1,
            label: "中国恒天党组织",
            children: [
              {
                id: 4,
                label: "上海恒天党组织",
                children: [
                  {
                    id: 5,
                    label: "三级 1-1-1",
                    children: [
                      {
                        id: 6,
                        label: "四级 1-1-1-1"
                      }
                    ]
                  },
                  {
                    id: 7,
                    label: "三级 1-1-2"
                  }
                ]
              },
              {
                id: 8,
                label: "南京恒天党委",
                children: [
                  {
                    id: 9,
                    label: "三级分类"
                  }
                ]
              },
              {
                id: 10,
                label: "江西恒天党委",
                children: [
                  {
                    id: 11,
                    label: "三级分类"
                  }
                ]
              },
              {
                id: 12,
                label: "武汉恒天党委",
                children: [
                  {
                    id: 13,
                    label: "武昌区党支部",
                    children: [
                      {
                        id: 14,
                        label: "武昌党支部",
                        children: [
                          {
                            id: 15,
                            label: "下级党支部"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 16,
                    label: "江夏区党支部",
                    children: [
                      {
                        id: 17,
                        label: "江夏党支部",
                        children: [
                          {
                            id: 18,
                            label: "下级党支部"
                          }
                        ]
                      }
                    ]
                  },
                  {
                    id: 19,
                    label: "洪山区党支部",
                    children: [
                      {
                        id: 20,
                        label: "光谷党支部",
                        children: [
                          {
                            id: 21,
                            label: "下级党支部"
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                id: 22,
                label: "天津恒天党委",
                children: [
                  {
                    id: 23,
                    label: "三级分类"
                  }
                ]
              }
            ]
          }
        ];
        let rootNode;
        // 默认加载第一个节点
        if (this.treeData && this.treeData.length) {
          rootNode = this.treeData[0];
        } else {
          rootNode = null;
        }
        this.getTableDataByNode(rootNode);
      }
    });
  },
  methods: {
    ...mapMutations(["setCurrentMenu"]),
    //通过关键字搜索组织在treeDate定位
    search(val) {
      this.$axios({
        method: "post",
        url: "/index/organization/organization_chart",
        data: {}
      }).then(res => {
        if (res.data.code == "200") {
          this.treeData = res.data.data;
        }
      });
    },
    //搜索组织名称查询组织列表展示在tableDate
    searchzz(val) {
        if(!(this.zzmc && this.sjzzmc)) {
            this.$axios({
                methode: 'post',
                url: '/index/organization/organization_chart',
                data: {}
            }).then((res) => {
                this.tableData = res.data.data
                this.total = this.tableData.length;
                this.page = 1;
            })
        }
    },
    // 获取所有组织列表，根据选择的node加载table列表
    getTableDataByNode(node) {
      this.currentNode = node;
      this.$axios({
        method: "get",
        url: "/index/organization/index",
        params: {
          // id:node&&node.id
          keyword: this.keyword
        }
      }).then(res => {
          console.log(res.data,'账户信息')
        if (res.data.code == "200" && res.data.data.data) {
          this.tableData = res.data.data.data;
          this.total = this.tableData.length;
          this.page = 1;
        }
      });
    },
    selectNode(node) {
      if (!(node.children && node.children.length)) {
        this.getTableDataByNode(node);
      }
    },
    addOrganizetion() {
      // this.setCurrentMenu({
      //   name: "添加组织",
      //   url: "Addorganizetion"
      // });
      this.$router.push({ name: "Addorganizetion" });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //删除组织
    deletStatus(row) {
      this.$axios({
          method: 'post',
          url: "/index/organization/del",
          data: {
              id: row.id
          }
      })
    },
    //修改组织状态
    customerStatus(row) {
        this.$axios({
            method:'post',
            url:'/index/organization/status',
            data:{
                id:row.id
            }
        }).then((res) => {
            if(res.data.code == 200 ) {
                // this.zhzt = res.data.data.status;
                // row.zhzt=row.zhzt=='0'?'1':'0';
            }else{
                this.$message.error(res.data.msg);
                row.status=row.status=='0'?'1':'0';
            }
        })
    },
    //跳转至重置账号密码页
    resetPassWord(row) {
        this.$router.push({name:'Resetpassword'});
        // this.setCurrentMenu({
        //   name:'重置密码',
        //   url: "Resetpassword"
        // });
    },
    //跳转至查看组织详情页
    viewDetails(row) {
        this.$router.push({name:'ViewDetails'});
        // this.setCurrentMenu({
        //     name:'查看详情',
        //     url: "ViewDetails"
        // })
    }

  }
};
</script>
<style lang="scss">
.Dzzgl {
  display: flex;
  flex-direction: row;
  padding: 0 20px 20px 20px;
  width: 100%;
  height: 100%;
  .el-table th > .cell {
    color: #aaaaaa;
    font-size: 14px;
    font-weight: normal;
  }
  .el-table th {
    background: #f8f8f8;
  }
  .el-table__row .cell {
    font-size: 14px;
  }
  .left {
    width: 260px;
    display: flex;
    flex-direction: column !important;
    background-color: #fff;
    .search-wrap {
        width: 100%;
        height: 80px;
    }
    .tree-wrap {
      .is-current > .el-tree-node__content {
        background-color: #ffad19 !important;
        font-weight: bold;
        color: #fff;

        // &:hover{
        //     background-color:#ffad19 !important;
        // }
      }
      .el-tree-node__label {
        font-size: 16px;
      }
    }
  }
  .right {
    position: relative;
    flex: 1;
    padding: 0 40px 0 10px;
    .search-wrap {
      // display: flex;
      margin-bottom: 45px;
      .search-item {
        // display: flex;
        float: left;
        width: 260px;
        align-items: center;
        .input-with-select {
          width: 150px;
          margin-left: 8px;
        }
      }
      .search-item-btn {
        float: right;
        // display: flex;
        // align-items: end;
      }
    }
    .clearfix {
        .Organizationlist {
            float:left;
            font-size: 18px;
            font-weight: bolder;
            color: #000;
            margin-top: 13px;
            margin-left: 10px;
        }
    }
    .table-wrap {
      & > .el-table-column {
        height: 30px;
        line-height: 30px;
      }
      .el-pagination {
        position: absolute;
        right: 60px;
        bottom: 80px;
        text-align: right;
        .el-pager li.active {
          background: #ffad19;
          color: #fff;
        }
      }
      .el-button:focus,
      .el-button:hover {
        color: red;
        border-color: transparent;
        background-color: #ecf5ff;
      }
    }
  }
}
</style>
